<template>
  <div class="article_main">
    <!-- 左侧文章列表 -->
    <div class="main_lt">
      <ArticleList
        @toggleLabel="toggleLabel"
        @entireHandle="entireHandle"
        @currentPageChange="currentPageChange"
        :articleList="articleList"
        :total="total"
        :labelList="labelList"
        v-if="labelList.length !== 0"
      ></ArticleList>
    </div>
    <!-- 右侧区域 -->
    <div class="main_rg" v-if="!isMobile">
      <Person />
      <Notice />
      <RecentWord :recentWord="recentWord" v-if="recentWord.length !== 0" />
    </div>
  </div>
</template>

<script setup>
  import ArticleList from './ArticleList.vue'
  import Person from '@/components/Person.vue'
  import RecentWord from './RecentWord.vue'
  import Notice from './Notice.vue'
  import { toRefs, onBeforeMount, ref, onMounted } from 'vue'
  import useAppStore from '@/store/appStore'
  import {
    queryArticleListRequest,
    queryLabelListRequest,
    queryRecentRequest,
    queryArticleByLabelIdRequest,
  } from '@/network/api/home'

  const appStore = useAppStore()
  let articleList = ref([])
  let labelList = ref([])
  const recentWord = ref([])
  let { isMobile } = toRefs(appStore)
  const total = ref(0)

  onBeforeMount(async () => {
    const list = await queryArticleListRequest()
    articleList.value = list.result.list
    total.value = list.result.total
    const label = await queryLabelListRequest()
    labelList.value = label.result
    const recent = await queryRecentRequest()
    recentWord.value = recent.result
  })

  const toggleLabel = async id => {
    const result = await queryArticleByLabelIdRequest(id)
    articleList.value = result.result.list
    total.value = result.result.total
  }

  const entireHandle = async () => {
    const list = await queryArticleListRequest()
    articleList.value = list.result.list
    total.value = list.result.total
  }

  const currentPageChange = async (currentPage, pageSize, currentIndex) => {
    if (currentIndex === 0) {
      const list = await queryArticleListRequest(currentPage, pageSize)
      articleList.value = list.result.list
      total.value = list.result.total
    } else {
      const result = await queryArticleByLabelIdRequest(
        currentIndex,
        currentPage,
        pageSize
      )
      articleList.value = result.result.list
      total.value = result.result.total
    }
  }
</script>

<style lang="less" scoped>
  .article_main {
    display: flex;
    width: 100%;
    justify-content: space-around;
    .main_lt {
      width: 78%;
    }
    .main_rg {
      width: 20%;
    }
  }

  @media only screen and (max-width: 990px) {
    .main_lt {
      width: 100% !important;
    }
  }
</style>
